<script setup lang='ts'>
import ikun from '@/assets/ikun.jpeg'
import ikun2 from '@/assets/ikun2.jpg'
import ikun3 from '@/assets/ikun3.jpg'
import ikun4 from '@/assets/ikun4.jpg'
import router from '@/router'


</script>


<template>
  <div class="content"> 
    <h3>1.常用方法：&lt; viewer &gt;标签 img必须直接在viewer标签下</h3>
    <viewer>
      <img :src="ikun" class="img" />
      <img :src="ikun2" class="img" />
      <img :src="ikun3" class="img" />
      <el-image :src="ikun4" fit="cover" class="img"/>
      <span>最后一张照片用el-image</span>
    </viewer>

    <h3>2.指令方法 v-viewer 可以透传到标签包裹的每个img</h3>
    <div v-viewer.static>
      <img :src="ikun" class="img" />
      <img :src="ikun2" class="img" />
      <img :src="ikun3" class="img" />
      <el-image :src="ikun4" fit="cover" class="img"/>
      <span>最后一张照片用el-image</span>
    </div>

    <div class="tip">tip: 便于移动端使用,通过v-viewer.static 和配置 toggleOnDblclick: false 极大增强用户体验</div>

    <el-button  @click="router.back()">返回</el-button>
  </div>
</template>


<style scoped lang="scss">
  .content{
    h3{
      margin: 20px 0;
    }
    .tip{
      margin: 20px 0;
      color: #646464
    }
  }
  .img{
    width: 100px;
    margin-right: 20px;
    cursor: pointer;
  }
</style>